<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
			function getById(id){
				return document.getElementById(id);
			}
			function getStyle(id,stylename){
				var obj2=getById(id);
				alert(obj2.style.backgroundColor);
				eval("obj2.style.backgroundColor='red'");
				alert(obj2.style.backgroundColor);
			}
			function hid(id){
				var jjj=getById(id);
				jjj.style.visibility="hidden";
				//jjj.style.display="none";
			}
			function shw(id){
				var jjj=getById(id);
				jjj.style.visibility="";
				//jjj.style.display="";
			}
			function colordepth(){
				var depth=window.screen.colorDepth;
				var colors=Math.pow(2,depth);
				alert(depth+"==="+colors);
			}
        </script>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<!--
		<style type="text/css">
			p{
				font-family:"Arial Black";
				color:#999966;
			}
			.myClass{
				font-size:24pt;
				font-style:italic;
			}
			#myId{
				background-color:#CC6633;
			}
		</style>
		-->
    </head>
    <body>
    	<h1 class="myClass">this is a headline<br>this is another headline</h1>
    	<p style="color:#0000FF;"> this is a plain old paragraph</p>
		<div id="myId" align="center">
    		this is my object.
			<br>
			<a href="#" onclick="">move</a>
    	</div>
		<br>
		<a href="#"> a link</a>
		<br>
		<form action="">
			style:<input type="text" name="inputstyle"/>
			<input type="button" value="displaystyle" onclick="getStyle('myId',this.form.inputstyle.value)"/>
			<br>
			<input type="button" value="hidden" onclick="hid('myId')"/>
			<input type="button" value="show" onclick="shw('myId')"/>
			<br>
			<input type="button" value="colorDepth" onclick="colordepth()"/>
		</form>
		<div style="text-transform:uppercase;">
			this is uppercase!	
		</div>
		<div style="text-transform:lowercase;">
			this is lowercase!
		</div>
		<div style="text-transform:capitalize;">
			this is word letter upper!
		</div>
    </body>
</html>
